<template>
  <div class="all">
    <el-container>
      <el-header>
        <span>项目编号：&nbsp;</span>
        <span>{{this.$route.query.projectCode}}</span>
        &nbsp;
        <span>项目名称：&nbsp;</span>
        <span>{{this.$route.query.projectName}}</span>
        &nbsp;
        <span>采购类别：&nbsp;</span>
        <span>{{this.$route.query.purchaseCategoryName}}</span>
        &nbsp;
        <span>预算金额：&nbsp;</span>
        <span>{{this.$route.query.budget}}元</span>
        &nbsp;
      </el-header>
      <el-main>
        <span>成交供应商</span>
        <el-table
           :data="data1"
            border
            style="table-layout: auto"
            >
          <el-table-column
              prop=supplierName
              label="供应商名称"
              width="230">
          </el-table-column>
          <el-table-column
              prop=price
              label="报价(元)"
              width="140">
          </el-table-column>
          <el-table-column
              prop=priceRanking
              label="报价排名"
              width="140">
          </el-table-column>
          <el-table-column
              prop=fileName
              label="报价文件"
              width="130">
            <template slot-scope="{row}">
              <!-- 给单元格内容添加点击事件 -->
<!--              <span @click="downloadquotatiton(row)">{{ row.fileName }}</span>-->
              <el-button style="margin-left: 0px;word-wrap: break-word;overflow-wrap: break-word;white-space: normal" type="text" @click="downloadquotatiton(row)">{{ row.fileName }}</el-button>
            </template>
          </el-table-column>
          <el-table-column
              prop=remark
              label="备注"
              width="130">
          </el-table-column>
        </el-table>
        <br>
        <span >其他供应商</span>
        <el-table
            :data="data2"
            border
            style="table-layout: auto">
          <el-table-column
              prop="supplierName"
              label="供应商名称"
              width="230">
          </el-table-column>
          <el-table-column
              prop="price"
              label="报价(元)"
              width="140">
          </el-table-column>
          <el-table-column
              prop="priceRanking"
              label="报价排名"
              width="140">
          </el-table-column>
          <el-table-column
              prop="fileName"
              label="报价文件"
              width="130">
            <template slot-scope="{row}">
              <!-- 给单元格内容添加点击事件 -->
<!--              <span @click="downloadquotatiton(row)">{{ row.fileName }}</span>-->
              <el-button style="margin-left: 0px;word-wrap: break-word;overflow-wrap: break-word;white-space: normal" type="text" @click="downloadquotatiton(row)">{{ row.fileName }}</el-button>

            </template>
          </el-table-column>
          <el-table-column
              prop="remark"
              label="备注"
              width="130">
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer>
        <div class="foot">
        审批意见：
        <el-input
            type="textarea"
            :rows="2"
            placeholder="输入内容"
            v-model="supplyerApprovalSuggestion"
        >
        </el-input>
        </div>
        审批状态：{{this.project.supplyerApproveStatus}}
        <div class="button">
        <el-button :disabled="isDisabled1" type="primary"  @click="submitThrough">审批通过</el-button>&nbsp;&nbsp;&nbsp;
        <el-button :disabled="isDisabled2" type="primary"  @click="return1">退回</el-button> &nbsp;
          <el-button type="primary"  @click="goBack">返回上一级</el-button>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "index",
  created() {
    console.log(this.$route.query)
    this.onload()
  },
  methods: {
    async downloadquotatiton(row) {
      let data = {
        'filePath': row.filePath,
        'fileName': row.fileName
      }
      let res = await request(
          {
            url: "/ContractSupplierQuotation/filedownload",
            method: "post",
            responseType: 'blob',
            data: data
          }
      )
      console.log(res.data)
      let blob = new Blob([res.data], {type: 'application/octet-stream'})
      // 创建一个临时的URL，用于下载文件
      let url = window.URL.createObjectURL(blob)
      // 创建一个a标签，指定下载链接和文件名
      let link = document.createElement('a')
      link.href = url
      link.download = row.fileName // 这里可以根据实际情况指定文件名和扩展名
      // 触发a标签的点击事件，开始下载文件
      link.click()
      // 释放URL资源
      window.URL.revokeObjectURL(url)
    },
    async onload() {
      this.isDisabled2=true;
      this.isDisabled1=true;
      let data = {}
      data['projectId'] = this.$route.query['projectId']
      let res = await request(
          {
            url: "/ContractSupplierQuotation/manage",
            method: "post",
            data: data
          }
      )
      console.log(res.data.data)
      this.tableData = res.data.data.quotations
      this.data1 = [this.tableData[0]]
      this.data2 = this.tableData.slice(1)
      this.project=res.data.data.project
      // if (this.project.supplyerApproveStatus === "审批通过" || this.project.supplyerApproveStatus === "退回") {
      //   this.isDisabled1 = true;
      // }
      // if (this.project.contractSubmitStatus === "已提交") {
      //   this.isDisabled2 = true;
      // }
      if(this.project.supplyerSubmitStatus==="已提交"){
        this.isDisabled1=false;
        this.isDisabled2=false;
      }
      if (this.project.contractSubmitStatus === "已提交") {
        this.isDisabled2 = true;
      }
      if(this.project.supplyerApproveStatus==="审批通过"){
        this.isDisabled1=true;
      }
    },
    async submitThrough() {
      let data = {}
      data['projectId'] = this.$route.query['projectId']
      data['supplyerApprovalSuggestion'] = this.supplyerApprovalSuggestion
      let res = await request(
          {
            url: "/SupplierApproval/approval",
            method: "post",
            data: data
          }
      )
      this.supplyerApproveStatus = '审批通过'


      if(res.data.code===200){
        this.$message({
          message:"审批通过成功",
          type:"success"
        })
      }else {
        this.$message({
          message:"审批通过失败",
          type:"error"
        })
      }
      await this.onload();
    },

    goBack() {
      this.$router.go(-1)
    },
    async return1() {
      let data = {}
      data['projectId'] = this.$route.query['projectId']
      data['supplyerApprovalSuggestion'] = this.supplyerApprovalSuggestion
      let res = await request(
          {
            url: "/SupplierApproval/return",
            method: "post",
            data: data
          }
      )

      if(res.data.code===200){
        this.$message({
          message:"退回成功",
          type:"success"
        })
      }else {
        this.$message({
          message:"退回失败",
          type:"error"
        })
      }
      console.log(1,this.project,this.isDisabled1,this.isDisabled2)
      await this.onload();
      console.log(2,this.project,this.isDisabled1,this.isDisabled2)
    },
  },

    data() {

      return {
        isDisabled1: true,
        isDisabled2: true,
        tableData: [],
        data1: [],
        data2: [],
        supplyerApprovalSuggestion: '',
        supplyerApproveStatus: this.$route.query.supplyerApproveStatus,
        project:{}

      }
    }
}
</script>

<style scoped>
.all{
  width:1000px
}
.el-header {
  background-color:rgb(255,255,255);
  color: #333;
  line-height: 60px;
}
.el-footer{
  background-color: rgb(255,255,255);
  color: #333;
  line-height: 40px;
}
.el-main {
  background-color: rgb(255,255,255);
  color: #333;
  line-height: 40px;
}
.foot{
  width: 770px;
}
.button{
  text-align: center;
}


body > .el-container {
  margin-bottom: 40px;
}


</style>
